<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8"  />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true"  />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou" style="background-color: green;">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao" style="background-color: green;">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2" style="background-color: green;">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3" style="background-color: green;">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4" style="background-color: green;">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5" style="background-color: green;">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6" style="background-color: green;">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7" style="background-color: green;">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8" style="background-color: green;">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9" style="background-color: green;">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10" style="background-color: green;">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11" style="background-color: green;">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">
                    <div class="box">
                        <div class="box-left">
                            <dv-border-box-5 style="background-color: #13191e;">
                                <dv-border-box-1 style="margin-top: 60px; width: 500px;height: 220px;">
                                <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">政务新媒体更新排行</h2></dv-border-box-8>
                                <dv-scroll-board :config="config" style="width:100%;height:220px" />
                                </dv-border-box-1>
                                <dv-border-box-1 style="margin-top: 80px; width: 500px;height: 220px;">
                                    <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">政务新媒体更新超时情况</h2></dv-border-box-8>
                                    <dv-scroll-board :config="timeoutConfig" style="width:100%;height:220px" />
                                </dv-border-box-1>
                                <dv-border-box-1 style="margin-top: 80px; width: 500px;height: 220px;">
                                    <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">政务新媒体更新超时情况</h2></dv-border-box-8>
                                    <dv-scroll-board :config="config1" style="width:100%;height:220px" />
                                </dv-border-box-1>
                            </dv-border-box-5>
                            
                            
                        </div>
                        <div class="box-main">
                            <div style="display: flex;justify-content: center;">
                                <tou1></tou1>
                            </div>
                            
                             <div style="height: 450px;width: 700px;">
                                <fangkuai></fangkuai>
                             </div>
                             
                             <div>
                                
                                <dv-border-box-9 :color="['green']" style="background-color: #13181d; margin-top: 30px;">
                                    <div style="height: 50px;"></div>
                                    <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;position: absolute;bottom: 340px;width: 600px;transform: translate(50px);"><h2 style="padding: 20px;">本年每月问题显示</h2></dv-border-box-8>
                                    <Echarts3DBar />
                                </dv-border-box-9>
                             </div>
                        </div>
                        <div class="box-right">
                             <dv-border-box-5 style="background-color: #13191e;">
                                <dv-border-box-1 style="margin-top: 60px; width: 500px;height: 220px;">
                                <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">政务新媒体错误统计</h2></dv-border-box-8>
                                <tuxing />
                                </dv-border-box-1>
                                <dv-border-box-1 style="margin-top: 80px; width: 500px;height: 220px;">
                                    <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">问题来源分布</h2></dv-border-box-8>
                                    <leida/>
                                </dv-border-box-1>
                                <dv-border-box-1 style="margin-top: 80px; width: 500px;height: 220px;">
                                    <dv-border-box-8 :color="[ 'green']" backgroundColor="green" style="height: 50px;"><h2 style="padding: 20px;">问题来源分布</h2></dv-border-box-8>
                                    <dv-scroll-board :config="config" style="width:100%;height:220px" />
                                </dv-border-box-1>
                            </dv-border-box-5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import tou1 from '../sandi/tou1.vue'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import Echarts3DBar from '../sandi/Echarts3DBar.vue'
import shuzi from '../sandi/shuzi.vue'
import fangkuai from '../sandi/fangkuai.vue'
import tuxing from '../sandi/tuxing.vue'
import leida from '../sandi/leida.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
    
    components: {
        CenterLeft1,
        CenterLeft2,
        Center,
        CenterRight1,
        CenterRight2,
        BottomLeft,
        BottomRight,
        Echarts3DBar,
        shuzi,
        tuxing,
        leida,
        fangkuai,
        tou1
    },
    setup() {
        const config=ref({
            header: ['排名', '名称', '类型',"更新数","点赞量","最后更新时间"],
            data: [
                ['1', '微信公众号', '社交媒体', '12次', '256', '2023-01-01'],
                ['2', '微博', '社交媒体', '8次', '189', '2023-01-02'],
                ['3', '抖音', '短视频', '15次', '423', '2023-01-03'],
                ['4', '快手', '短视频', '15次', '423', '2023-01-09'],
                ['5', '小红书', '短视频', '15次', '423', '2023-01-13']
            ],
            headerBGC:"#264635",
            oddRowBGC:"#14211e",
            evenRowBGC:"#010102"
        })



        // 新增的超时情况配置
        const timeoutConfig = ref({
            header: ['名称', '类型', '最后更新时间', '更新状态'],
            data: [
                ['新媒体A', '微博', '2023-12-12', '<p style="background:red;text-align:center;border-radius:5px;">已经超时5天</p>'],
                ['新媒体B', '微信', '2023-12-12', '<p style="background:red;text-align:center;border-radius:5px;">已经超时5天</p>'],
                ['新媒体C', '抖音', '2023-12-12', '<p style="background:red;text-align:center;border-radius:5px;">已经超时5天</p>'],
                ['新媒体D', '微信', '2023-12-12', '<p style="background:#c07d2f;text-align:center;border-radius:5px;">还剩2天到期</p>'],
                ['新媒体E', '微博', '2023-12-12', '<p style="background:#c07d2f;text-align:center;border-radius:5px;">还剩2天到期</p>']
            ],
            headerBGC: '#264635',
            oddRowBGC: '#14211e',
            evenRowBGC: '#010102'
        })


        const config1=ref({
            header: ['名称', '类型', '严重错误',"一般错误"],
            data: [
                [ '新媒体A', '微博', '<p style="background:red;width:50px;text-align:center;border-radius:5px;">10</p>','<p style="background:#c07d2f;width:50px;text-align:center;border-radius:5px;">5</p>'],
                [ '新媒体B', '微信', '<p style="background:red;width:50px;text-align:center;border-radius:5px;">10</p>','<p style="background:#c07d2f;width:50px;text-align:center;border-radius:5px;">5</p>'],
                [ '新媒体C', '抖音', '<p style="background:red;width:50px;text-align:center;border-radius:5px;">10</p>','<p style="background:#c07d2f;width:50px;text-align:center;border-radius:5px;">5</p>'],
                [ '新媒体D', '微信', '<p style="background:red;width:50px;text-align:center;border-radius:5px;">10</p>','<p style="background:#c07d2f;width:50px;text-align:center;border-radius:5px;">5</p>'],
                [ '新媒体E', '微博', '<p style="background:red;width:50px;text-align:center;border-radius:5px;">10</p>','<p style="background:#c07d2f;width:50px;text-align:center;border-radius:5px;">5</p>'],
            ],
            headerBGC:"#264635",
            oddRowBGC:"#14211e",
            evenRowBGC:"#010102",
        })

        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,
            config,
            timeoutConfig,
            config1
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
.box {
    width: 100%;
    height: 100%;
    // background: #f5f5f5;
    display: flex;
    justify-content: space-around;
    .box-left {
        width: 35%;
        height: 100%;
        // background: red;
    }
    .box-main {
        width: 40%;
        height: 100%;
        // background-color: green;
        margin-top: 60px;
        background-color: #242f38;
        // transform: translateX(-100px);
    }
    .box-right {
        width: 35%;
        height: 100%;
        // background: blue; 
        // margin-top: 60px;
    }
}

</style>